<template>
  <div>
    <el-card class="card">
      <el-input v-model="searchPatientId" placeholder="请输入病人ID" class="my_el_input">
        <el-button slot="append" icon="el-icon-search" @click="doQuery" />
        <!-- <el-button slot="append" icon="el-icon-refresh" @click="resetQuery" /> -->
      </el-input>
      <el-table :data="list" height="600" border stripe style="width: 100%">
        <el-table-column prop="id" fixed label="检查ID" width="100" />
        <el-table-column prop="doctor_name" label="开立医生姓名" width="120" />
        <el-table-column prop="time" label="开立时间" width="155" />
        <el-table-column prop="name" label="项目名称" width="140" />
        <el-table-column prop="position" label="检查部位/要求" width="140" />
        <el-table-column prop="description" label="检查描述" width="140" />
        <el-table-column align="center" prop="status" label="检查状态" width="113px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status != '已完成'" type="warning" size="mini">未完成</el-tag>
            <el-tag v-if="scope.row.status === '已完成'" type="success" size="mini">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="result" label="检查结果" width="150px">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>结果: {{ scope.row.result }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">结果</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.status === '已完成'" type="warning" plain @click="doGet(scope.row)">录入</el-button>
            <el-button :disabled="scope.row.status === '已完成'" type="danger" plain @click="done(scope.row)">结束</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
    <el-dialog title="检查信息" :visible.sync="dialogUpdate" width="45%" center>
      <el-form ref="invoiceInFormation" :model="checkApplyInFormation" label-width="150px" :rules="invoiceRules">
        <el-form-item label="结果:" prop="apply_result">
          <el-input
            v-model="checkApplyInFormation.apply_result"
            type="textarea"
            autosize
            class="box-card"
            placeholder="结果"
          />
        </el-form-item>
      </el-form>
      <!--      <template slot-scope="scope">-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="doUpdate('invoiceInFormation')">修 改</el-button>
      </span>
      <!--      </template>-->
    </el-dialog>
  </div>
</template>

<script>
import { DocterEndCheck, DocterGetPaientCheckList, DocterUpdateCheck } from '@/api/checkApply'

export default {
  data() {
    return {
      searchPatientId: '',
      list: [],
      templist: [],
      query_registID: '',
      checkApplyInFormation: {
        apply_id: '',
        apply_name: '',
        apply_position: '',
        apply_description: '',
        apply_price: 8,
        apply_result: ''
      },
      invoiceInFormation: {
        apply_result: ''
      },
      dialogUpdate: false,
      temp: '',
      invoiceRules: {
        apply_result: [{ required: true, message: '请输入检查结果', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    // this.initData()
  },
  methods: {
    // async initData() {
    //   // 获取所有检检查数据
    //   // const res = await getAllApply()
    // },
    async doQuery() {
      // 搜索
      const data = {
        patient_id: this.searchPatientId
      }
      // console.log('搜索检查申请病人id：', data)
      const res = await DocterGetPaientCheckList(data)
      this.list = res.applys
    },
    resetQuery() {
      this.searchPatientId = ''
      this.initData()
    },
    doUpdate(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const data1 = {
            apply_id: this.checkApplyInFormation.apply_id,
            apply_name: this.checkApplyInFormation.apply_name,
            apply_position: this.checkApplyInFormation.apply_position,
            apply_description: this.checkApplyInFormation.apply_description,
            apply_price: this.checkApplyInFormation.apply_price,
            apply_result: this.checkApplyInFormation.apply_result
          }
          console.log('编辑检查申请：', data1)
          await DocterUpdateCheck(data1)
          this.doQuery()
          this.dialogUpdate = false
          this.$refs[formName].resetFields()
        }
      })
      this.doQuery()
    },
    doGet(row) {
      this.dialogUpdate = true
      console.log(row)
      this.checkApplyInFormation.apply_id = row.id
      this.checkApplyInFormation.apply_name = row.name
      this.checkApplyInFormation.apply_position = row.position
      this.checkApplyInFormation.apply_description = row.description
      this.checkApplyInFormation.apply_price = row.price
      this.checkApplyInFormation.apply_result = row.result
    },
    async done(row) {
      const data = {
        apply_id: row.id,
        apply_status: '已完成'
      }
      console.log('结束检查申请：', data)
      await DocterEndCheck(data)
      this.doQuery()
    }
  }
}
</script>

  <style scoped="scoped">
  .card {
    background: #ececec;
    border: 1px solid;
  }

  .box-card {
    width: 480px;
    height: 50px;
  }

  .input-with-select {
    background-color: #fff;
  }

  .my_el_input {
    width: 400px;
  }
  </style>
